<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form th:action="@{/index}" method="post">
<p>
    <span>所属项目:</span>
    <select name="pid" id="pid">
    <option value="0">全部</option>
    <option value="1">趣买买</option>
    <option value="2">支付宝</option>
    <option value="3">超市</option>
   </select><input type="submit" value="查询" id="sel"/>
</p>
</form>
<span><a th:href="@{add.html}"><input type="button" value="新增bug"/></a></span>
<div>
    <p><h3>BUG列表</h3></p>
    <span>[[${msg}]]</span>
</div>
   <table border="1" id="table">
       <thead>
       <tr>
          <th>BUG编号</th>
          <th>严重性</th>
          <th>标题</th>
          <th>报告人</th>
          <th>报告时间</th>
          <th>操作</th>
       </tr>
       </thead>
       <tbody>
            <tr th:each="page,status:${page.list}">
                <td><a th:href="@{/toUpdate(id=${page.id})}">[[${page.id}]]</a></td>
                <td th:if="${page.severity}==10">文字错误</td>
                <td th:if="${page.severity}==20">次要错误</td>
                <td th:if="${page.severity}==30">严重错误</td>
                <td th:text="${page.title}">标题</td>
                <td th:text="${page.reportuser}">报告人</td>
                <td th:text="${#dates.format(page.createdate,'yyyy/MM/dd HH:mm:ss')}">报告时间</td>
                <td><a href="#" th:onclick="|del(this,${page.id})|">删除</a></td>
            </tr>
       </tbody>
   </table>
<span>
            <a th:href="@{index(pageNo=1)}">首页</a>&nbsp;
            <a th:href="@{index(pageNo=${page.pageNo-1})}">上一页</a>&nbsp;
            <a th:href="@{index(pageNo=${page.pageNo+1})}">下一页</a>&nbsp;
            <a th:href="@{index(pageNo=${page.totalPageCount})}">尾页</a>&nbsp;
        <span>第</span>[[${page.pageNo}]]页/共[[${page.totalPageCount}]]页
    </span>
</body>
<script type="text/javascript" th:src="@{/webjars/jquery/3.5.1/jquery.js}" ></script>
<script>
    function del(obj,id) {
        if (confirm("确认删除吗?")){
            $.getJSON("del","id="+id,function (data) {
                alert(data.msg);
                $(obj).parents("tr").remove();
            })
        }
    }

    $("#table tr:even").css("background-color","aqua");
</script>
</html>